<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-form :model="searchParams" label-width="80px" style="height: 100px; margin: 10px">
          <el-form-item label="库名">
            <el-input v-model="searchParams.quBankName"> </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="2" :offset="20">
        <el-button type="primary" @click="searchTable(searchParams)">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="emptySearch(searchParams)">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
        <el-button type="primary" @click="delQuBank()">删除</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-table :data="tableData" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="quBankName" label="题库名"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

    </el-row>
    <Page :pageNum="searchParams.current" :total="searchParams.total" :pageSize="searchParams.size"
      @sizeChange="sizeChange" @currentChange="currentChange"></Page>
    <el-dialog title="添加题库" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="formBank">
        <el-form-item label="库名" :label-width="formLabelWidth">
          <el-input v-model="formBank.quBankName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="题库详情" :visible.sync="detailDialogVisible" fullscreen width="30%">
      <el-col style="margin-bottom: 20px;">
        <el-button @click="expansion">全部展开</el-button>
        <el-button @click="closeCollapse">全部关闭</el-button>
      </el-col>
      <el-col>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="(item, index) in questionList" :key="index" :name="index">
            <template slot="title">
              {{ item.content }}<i class="header-icon el-icon-info"></i>
            </template>
            <div><el-tag type="success">题目答案：</el-tag></div>

            <div v-if="item.quType === 1 || item.quType === 3">
              <el-radio-group :v-model="q.answerCorrect==1?q.quId:0" size="small">
                <div v-for="(q, index) in item.quAnswers" :key="index">
                  <el-radio  :label=q.quId  border>{{ q.quAnswerContent }} </el-radio>
                </div>
              </el-radio-group>
            </div>
            <div v-else-if="item.quType === 2">
              <el-checkbox-group v-model="checkList">
                <div v-for="(q, index) in item.quAnswers" :key="index">
                  <el-checkbox :label=q.quAnswerContent border :checked="q.answerCorrect == 1">
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div v-else-if="item.quType === 4">

            </div>
            <div><el-tag>题目解析：</el-tag></div>
            <div>{{ item.analysis }}</div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-dialog>
  </div>
</template>
<script>

import { queryQuBankAll, saveQuBank, delQuBank, queryBankDetail } from '@/api/question/question'
import Page from '@/components/Pagination/pagination.vue'

export default {
  components: { Page },
  data() {
    return {
      rr:0,
      checkList: 0,
      activeNames: [],
      detailDialogVisible: false,
      dialogFormVisible: false,
      quBank: "",
      formBank: {
        quBankName: "",
      },
      tableData: [],
      formLabelWidth: "120px",
      delBankIds: [],
      searchParams: {
        size: 10,
        current: 1,
        total: 0,
        quBankName: "",
      },
      questionList: []
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this.queryAll(this.form);
  },
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.searchParams.current = val;
      //刷新表格
      this.queryAll();
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.searchParams.size = val;
      //刷新表格
      this.queryAll();
    },
    //获取列表
    queryAll() {
      queryQuBankAll(this.searchParams)
        .then((res) => {
          this.tableData = res.data.records;
          this.searchParams.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //新增题库
    submitFrom() {
      saveQuBank(JSON.stringify(this.formBank)).
        then((res) => {
          if (res.code == 200) {
            //关闭弹窗
            this.handleClose();
            //刷新table
            this.queryAll(this.form);
            //清空表单
            this.clearFrom();
          }
        });
    },
    //删除题库
    delQuBank() {
      delQuBank({ delBankIds: this.delBankIds })
        .then((res) => {
          if (res.code == 200) {
            //关闭弹窗
            this.handleClose();
            //刷新table
            this.queryAll(this.form);
            //清空表单
            this.clearFrom();
          }
        });
    },
    //搜索
    searchTable(searchParams) {
      this.queryAll(searchParams);
    },
    //重置搜索框
    emptySearch(searchParams) {
      searchParams.quBankName = "";
      this.queryAll();
    },
    //关闭弹窗
    handleClose() {
      this.dialogFormVisible = false;
      //清空表单
      this.clearFrom();
    },
    //清空表单
    clearFrom() {
      this.searchParams.quBankName = "";
      this.formBank.quBankName = "";
    },
    handleSelectionChange(val) {
      this.delBankIds = [];
      for (let i in val) {
        this.delBankIds.push(val[i].quBankId);
      }
    },
    //详情
    handleClick(row) {
      this.detailDialogVisible = true;
      queryBankDetail({
        quBankId: row.quBankId
      }).then(res => {
        if (res.code === 200) {
          this.questionList = res.data;
        }

      })
    },

    //全部展开
    expansion() {
      let arr = this.questionList;
      let len = arr.length
      for (let i = 0; i < len; i++) {
        this.activeNames.push(i)
      }
    },
    //全部关闭
    closeCollapse() {
      this.activeNames = [];
    },
    //展开折叠面板
    handleChange(val) {

    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>